<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>生成图片二维码</title>

</head>
<body style="background-color: burlywood">
<p>
    <input type="text" class="topAlign" id="verify" name="verify" required>
    <canvas width="100" height="40" id="verifyCanvas" ></canvas>
    <img id="code_img" style="width: 100px;height: 40px;">
</p>
</body>
<script>
    var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0",'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
        'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x',
        'y','z'];

    //    var rand1 = nums[Math.floor(Math.random() * nums.length)];
    //    var rand2 = nums[Math.floor(Math.random() * nums.length)];
    //    var rand3 = nums[Math.floor(Math.random() * nums.length)];
    //    var rand4 = nums[Math.floor(Math.random() * nums.length)];
    //    var rand5 = nums[Math.floor(Math.random() * nums.length)];

    var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布
    var context = canvas.getContext("2d");                 //获取画布2D上下文

    // Fill the background
    context.fillStyle = "white";                         //设置填充色
    context.fillRect(0, 0, canvas.width, canvas.height);   //填充背景色

    // Draw the pass-phrase string
    context.fillStyle = "green";    //设置填充色
    context.font = "25px Arial";      //设置字体

    var rand=new Array();
    var x=new Array();
    var y=new Array();
    for (var i = 0; i < 5; i++){
        rand[i] = nums[Math.floor(Math.random() * nums.length)]
        x[i] = i * 20;
        y[i] = Math.random() * 25+15;
        context.fillText(rand[i], x[i], y[i]);
    }

    //        var y1 = Math.random() * 25+15;
    //        var y2 = Math.random() * 25+15;
    //        var y3 = Math.random() * 25+15;
    //        var y4 = Math.random() * 25+15;
    //        var y5 = Math.random() * 25+15;
    //        context.fillText(rand1, 10, y1);  //设置第一个随机码显示的位置，并显示。下面同理
    //        context.fillText(rand2, 30, y2);
    //        context.fillText(rand3, 45, y3);
    //        context.fillText(rand4, 60, y4);
    //        context.fillText(rand5, 75, y5);

    // Draw some random lines
    for (var i = 0; i < 4; i++) {
        drawline(canvas, context);  //画4条随机线
    }

    // Sprinkle in some random dots
    for (var i = 0; i < 30; i++) {
        drawDot(canvas, context);
    }
    convertCanvasToImage(canvas)
    function drawline(canvas, context) {
        context.moveTo(0, Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
        context.lineTo(canvas.width, Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
        context.lineWidth = 0.5;                 //随机线宽
        context.strokeStyle = 'rgba(50,50,50,0.5)';   //随机线描边属性
        context.stroke();                        //描边，即起点描到终点
    }

    function drawDot(canvas, context) {  //所谓画点其实就是画1px像素的线，方法不再赘述
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px+1, py+1);
        context.lineWidth = 0.2;
        context.stroke();

    }
    function convertCanvasToImage(canvas) {
        document.getElementById("verifyCanvas").style.display="none";
        var image =document.getElementById("code_img");
        image.src = canvas.toDataURL("image/png");
        return image;
    }
</script>
</html>